<div class="product-quichview-section">
	<div id="qv-image" class="hl-left">
    	<div class="product-mainimage">
        	<table>
            	<tr valign="middle">
                	<td id="product-preview"><a class="zoom" href="<?php echo $post['imagepreview']?>"><img  src="<?php echo $post['imagethumbnail']?>" /></a></td>
                </tr>
            </table>
	        
        </div>
    	<div id="hl-galary" class="hl-center">
            <table>
                <tr>
                    <td style="width:14px">
                        <img class="hl-link" id="hl-prev" src="<?php echo HTTP_SERVER.DIR_IMAGE?>galary_button_prev.png" />
                    </td>
                    <td>
                        <div style="overflow:hidden;width:248px;margin:0 auto;">
                            <table id="hl-scroll">
                                <tr>
                                   
                                    <?php foreach($subimage as $key => $val){ ?>
                                    <td>
                                        <img  id="icon-<?php echo $key?>" class="hl-icon-item" src="<?php echo $val['icon']?>" />
                                    </td>
                                    <?php } ?>
                                </tr>
                            </table>
                        </div>
                        
                    </td>
                    <td style="width:14px">
                        <img class="hl-link" id="hl-next" src="<?php echo HTTP_SERVER.DIR_IMAGE?>galary_button_next.png" />
                    </td>
                </tr>
            </table>
        </div>
<script language="javascript">
$(document).ready(function() { 
$(".hl-icon-item").click(function(){
	var arr = this.id.split("-");
	var key = arr[1];
	$("#product-preview").html($("#preview-"+key).html());
	$(".zoom").fancybox({
			'overlayShow'	: true,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
});

	
	$('#hl-container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'slow' });
	
	$(".zoom").fancybox({
			'overlayShow'	: true,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
});
</script>
<script language="javascript">
var block1 = 62;
var length = $("#hl-scroll").width();
var view = 248;
var move = true
var movenext = true
$("#hl-prev").click(function(){
	movenext = true;
	if(move == true)
	{
		move = false;
		var left = $("#hl-scroll").css("margin-left").replace("px","");
		//alert(left);
		if(left < 0)
		{
			
			$("#hl-scroll").animate({"marginLeft": "+="+ block1 +"px"}, "slow",function(){
				/*left = $("#hl-scoll").css("margin-left").replace("px","");
				if(left > 0)
					$("#hl-scoll").css("margin-left","0px");*/
				move = true;
			});
			
			
		}
		else
			move = true;
	}
		
});
$("#hl-next").click(function(){
	length = $("#hl-scroll").width();
	if(movenext == true)
	{
		movenext = false;
		
		var left = $("#hl-scroll").css("margin-left").replace("px","");
		
		if( parseInt(length) + parseInt(left) > view)
			$("#hl-scroll").animate({"marginLeft": "-="+ block1 +"px"}, "slow",function(){
				movenext = true;
			});
	}
	
});
</script>
        <div style="display:none">
            <?php foreach($subimage as $key => $val){ ?>
            <div  id="preview-<?php echo $key?>">
                <a class="zoom" href="<?php echo $val['imagepreview']?>"><img src="<?php echo $val['imagethumbnail']?>" /></a>
            </div>
            <?php } ?>
        </div>
    </div>
    <div id="qv-content" class="hl-right">
    	<div class="qv-title"><?php echo $post['title']?></div>
        <div class="qv-price">
        	Giá: <?php echo $this->string->numberFormate($post['price'])?> <?php echo $this->document->setup['Currency']?>
        </div>
        <div class="qv-summary">
        	<?php echo $post['summary']?>
        </div>
        <div align="center">
            <a onclick="cart.add('<?php echo $post['mediaid']?>')"><img src="<?php echo HTTP_SERVER.DIR_IMAGE?>btn-add-cart.png" /></a>
            <a href="<?php echo $post['link']?>"><img src="<?php echo HTTP_SERVER.DIR_IMAGE?>btn-detail.png" /></a>
		</div>
    </div>
    <div class="clearer">&nbsp;</div>
</div>
